<template>
  <div class="digital-city-page">
    <h2 class="content-title">数字城市解决方案</h2>

    <div class="solution-intro">
      <div class="solution-image">
        <img src="http://www.sutpc.com/resource/sutpc/images/solution-digital-city.jpg" alt="数字城市解决方案">
      </div>
      <div class="solution-desc">
        <p>中空领航数字城市解决方案以"数据驱动、科技赋能、应用创新"为核心理念，基于数字孪生技术，构建城市运行的数字镜像，实现城市的全域感知、全息呈现、全程智治。</p>
        <p>我们融合大数据、人工智能、物联网等前沿技术，打造覆盖城市规划、建设、管理、服务全过程的数字城市平台，为城市高质量发展提供智慧支撑。</p>
      </div>
    </div>

    <div class="solution-framework">
      <h3 class="section-title">解决方案架构</h3>
      <div class="framework-image">
        <img src="http://www.sutpc.com/resource/sutpc/images/digital-city-framework.png" alt="数字城市解决方案架构">
      </div>
    </div>

    <div class="solution-modules">
      <h3 class="section-title">核心模块</h3>
      <div class="modules-container">
        <div class="module-item">
          <div class="module-icon">
            <img src="http://www.sutpc.com/resource/sutpc/images/icon-digital-twin.svg" alt="数字孪生平台">
          </div>
          <div class="module-content">
            <h4>城市数字孪生平台</h4>
            <p>构建高精度三维城市模型，实现城市地上地下空间的数字化表达，支持多源数据集成与可视化展示，为城市管理提供沉浸式感知环境。</p>
          </div>
        </div>
        
        <div class="module-item">
          <div class="module-icon">
            <img src="http://www.sutpc.com/resource/sutpc/images/icon-iot.svg" alt="物联感知网络">
          </div>
          <div class="module-content">
            <h4>城市物联感知网络</h4>
            <p>整合物联网、视频监控、移动终端等感知设备，构建全域感知网络，实现城市运行状态的实时监测和数据采集。</p>
          </div>
        </div>
        
        <div class="module-item">
          <div class="module-icon">
            <img src="http://www.sutpc.com/resource/sutpc/images/icon-brain.svg" alt="城市智能中枢">
          </div>
          <div class="module-content">
            <h4>城市智能中枢</h4>
            <p>基于人工智能和大数据分析技术，构建城市智能分析决策引擎，支持城市态势研判、事件预警、风险预测和智能决策。</p>
          </div>
        </div>
        
        <div class="module-item">
          <div class="module-icon">
            <img src="http://www.sutpc.com/resource/sutpc/images/icon-command.svg" alt="城市指挥平台">
          </div>
          <div class="module-content">
            <h4>城市综合指挥平台</h4>
            <p>打造城市运行管理的"一网统管"平台，实现跨部门协同联动，支持突发事件应急处置、重大活动保障、日常运行监管等业务。</p>
          </div>
        </div>
        
        <div class="module-item">
          <div class="module-icon">
            <img src="http://www.sutpc.com/resource/sutpc/images/icon-data.svg" alt="数据资源平台">
          </div>
          <div class="module-content">
            <h4>城市数据资源平台</h4>
            <p>构建城市数据资源体系，实现数据采集、治理、共享、开放的全链路管理，为城市管理和服务提供数据支撑。</p>
          </div>
        </div>
        
        <div class="module-item">
          <div class="module-icon">
            <img src="http://www.sutpc.com/resource/sutpc/images/icon-service.svg" alt="智慧服务平台">
          </div>
          <div class="module-content">
            <h4>城市智慧服务平台</h4>
            <p>面向市民和企业提供便捷高效的一站式服务平台，覆盖政务服务、生活服务、信息查询等多种应用场景。</p>
          </div>
        </div>
      </div>
    </div>

    <div class="solution-applications">
      <h3 class="section-title">应用场景</h3>
      <div class="applications-container">
        <div class="application-item">
          <div class="application-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/app-planning.jpg" alt="智慧规划">
          </div>
          <div class="application-content">
            <h4>智慧城市规划</h4>
            <p>基于数字孪生技术，构建城市规划设计模型，实现交通、市政、人口等多要素融合仿真，支持方案评估优化和规划决策支持，提升规划科学性。</p>
            <div class="application-features">
              <div class="feature-item">多规合一</div>
              <div class="feature-item">方案评估</div>
              <div class="feature-item">仿真模拟</div>
              <div class="feature-item">决策支持</div>
            </div>
          </div>
        </div>
        
        <div class="application-item">
          <div class="application-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/app-management.jpg" alt="智慧管理">
          </div>
          <div class="application-content">
            <h4>城市精细化管理</h4>
            <p>通过数字孪生平台实现城市部件、市政设施、环境要素等的可视化管理，结合AI分析和物联感知，支持城市环境、安全、交通等领域的精细化管理。</p>
            <div class="application-features">
              <div class="feature-item">部件管理</div>
              <div class="feature-item">事件处置</div>
              <div class="feature-item">协同联动</div>
              <div class="feature-item">绩效评估</div>
            </div>
          </div>
        </div>
        
        <div class="application-item">
          <div class="application-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/app-emergency.jpg" alt="应急指挥">
          </div>
          <div class="application-content">
            <h4>应急指挥调度</h4>
            <p>利用数字孪生技术构建城市应急指挥平台，实现突发事件的快速感知、研判、决策和处置，提升城市应对自然灾害、公共安全等突发事件的能力。</p>
            <div class="application-features">
              <div class="feature-item">风险预警</div>
              <div class="feature-item">态势感知</div>
              <div class="feature-item">预案推演</div>
              <div class="feature-item">资源调度</div>
            </div>
          </div>
        </div>
        
        <div class="application-item">
          <div class="application-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/app-service.jpg" alt="智慧服务">
          </div>
          <div class="application-content">
            <h4>智慧公共服务</h4>
            <p>面向市民提供教育、医疗、养老、出行等领域的智慧服务，通过大数据分析优化资源配置，提升服务质量，增强市民获得感和幸福感。</p>
            <div class="application-features">
              <div class="feature-item">一码通城</div>
              <div class="feature-item">便民服务</div>
              <div class="feature-item">资源预约</div>
              <div class="feature-item">个性推荐</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="solution-cases">
      <h3 class="section-title">成功案例</h3>
      <div class="cases-container">
        <div class="case-item">
          <div class="case-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/case-city1.jpg" alt="深圳市数字孪生平台">
          </div>
          <div class="case-content">
            <h4>深圳市城市数字孪生平台</h4>
            <p>为深圳市打造的城市级数字孪生平台，覆盖全市2000平方公里区域，构建包含地形、建筑、道路、绿地等要素的高精度三维模型，集成各类城市感知数据，实现城市规划建设、交通运行、环境治理、应急管理等多领域应用。该平台已成为深圳市城市治理的重要支撑平台，助力深圳建设全球数字化标杆城市。</p>
          </div>
        </div>
        
        <div class="case-item">
          <div class="case-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/case-city2.jpg" alt="雄安新区智慧城市">
          </div>
          <div class="case-content">
            <h4>雄安新区智慧城市建设</h4>
            <p>参与雄安新区智慧城市顶层设计和建设实施，打造"数字孪生城市"基础平台，实现城市规划建设全过程数字化管理。平台基于CIM技术，集成BIM、GIS、物联网等数据，支持智能化审批、智慧施工、精细化管理等应用，成为雄安新区建设发展的数字底座，为中国新型智慧城市建设提供示范样板。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DigitalCityPage'
}
</script>

<style scoped>
.digital-city-page {
  max-width: 100%;
}

.content-title {
  font-size: 28px;
  color: var(--primary-color);
  margin-bottom: 30px;
  position: relative;
  padding-bottom: 15px;
}

.content-title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: var(--secondary-color);
}

.solution-intro {
  display: flex;
  gap: 40px;
  margin-bottom: 60px;
}

.solution-image {
  flex: 0 0 50%;
}

.solution-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.solution-desc {
  flex: 0 0 50%;
}

.solution-desc p {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 20px;
}

.section-title {
  font-size: 24px;
  color: var(--text-color);
  margin-bottom: 30px;
  position: relative;
  padding-bottom: 15px;
}

.section-title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: var(--secondary-color);
}

.solution-framework {
  margin-bottom: 60px;
}

.framework-image {
  width: 100%;
  text-align: center;
}

.framework-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.solution-modules {
  margin-bottom: 60px;
}

.modules-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.module-item {
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 30px;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.module-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.module-icon {
  width: 80px;
  height: 80px;
  background-color: var(--primary-color-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.module-icon img {
  width: 40px;
  height: 40px;
}

.module-content h4 {
  font-size: 18px;
  color: var(--primary-color);
  margin-bottom: 15px;
}

.module-content p {
  color: #666;
  line-height: 1.6;
}

.applications-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 60px;
}

.application-item {
  display: flex;
  gap: 30px;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.application-image {
  flex: 0 0 35%;
}

.application-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.application-content {
  flex: 1;
  padding: 30px 30px 30px 0;
}

.application-content h4 {
  font-size: 20px;
  color: var(--primary-color);
  margin-bottom: 15px;
}

.application-content p {
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

.application-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.feature-item {
  display: inline-block;
  background-color: var(--primary-color-light);
  color: var(--primary-color);
  padding: 6px 15px;
  border-radius: 20px;
  font-size: 14px;
}

.cases-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.case-item {
  display: flex;
  gap: 30px;
  background-color: #f8f8f8;
  border-radius: 8px;
  overflow: hidden;
}

.case-image {
  flex: 0 0 40%;
}

.case-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-content {
  flex: 1;
  padding: 30px 30px 30px 0;
}

.case-content h4 {
  font-size: 20px;
  color: var(--primary-color);
  margin-bottom: 15px;
}

.case-content p {
  color: #555;
  line-height: 1.8;
}

@media (max-width: 992px) {
  .solution-intro {
    flex-direction: column;
  }
  
  .modules-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .application-item,
  .case-item {
    flex-direction: column;
  }
  
  .application-image,
  .case-image {
    height: 250px;
  }
  
  .application-content,
  .case-content {
    padding: 25px;
  }
}

@media (max-width: 768px) {
  .modules-container {
    grid-template-columns: 1fr;
  }
}
</style> 